@import "./base.styl"
.customState {
  background: #f9f9f9;
  font-size: 14px;
  color: #000;

  .loginProfile {
    width: 100%;
    height: 100%;

    .after-login {
      width: 100%;
      background: #fff;

      .backtoPage {
        position: absolute
        top: 10px
        left 8px
        width: 12px
        height 20px

        img {
          width: 12px
          height 20px
        }  
      }

      .profile-wp {
        width: 100%;
        text-align: center;

        img {
          width: 100%;
        }
      }

      .profile {
        position: relative;
        width: 100%;
        text-align: center;

        .profilebg {
          position: absolute;
          top: 35px
          width 100%
          padding: 0;
          text-align: center;

          img {
            width 100px
            height 100px
            border-radius: 50%;
          }
        }

        .loginbox {
          clear: both;
          position: absolute;
          top 145px
          width: 100%;
          text-align: center;
          line-height: 1;

          a {
            display: block;
            font-size 26px
            font-weight: normal;
          }

          a.login {
            color: #8590A6;
          }
        }

        .news-version {
          position: absolute;
          top 35px
          height 30px
          width: 100%;
          text-align: center;

          .version-bg {
            width 152px
            height 30px
            margin: 0 auto;

            img {
              width: 100%;
            }
          }

          p {
            position: absolute;
            top: 0;
            color: #fff;
            font-size 16px
            height 30px
            line-height 30px
            margin: 0;
            width: 100%;
          }
        }

        .loginbox a.logout {
          font-size 26px
          font-weight: normal;
          color: #000;
        }

        .editorInfo {
          clear: both;
          position: absolute;
          top 180px
          width: 80%;
          text-align: center;
          color: #939393
          font-size: 12px
          left 50%
          margin-left: -40%
          overflow hidden
          white-space: nowrap
          text-overflow ellipsis


          a {
            display: inline-block;
            width 60px
            height 24px
            line-height 24px
            border: 1px solid #000;
            border-radius: 4px;
            color: #000;
            font-size 12px
          }
        }

        .attentedBox {
          position: absolute
          top: 210px
          width: 100%
          text-align center

          a {
            display: inline-block
            padding: 0 20px
            text-align: center
            font-size: 12px
            color: #202020
            border: 1px solid #202020
            border-radius 4px
            -webkit-border-radius 4px
            -moz-border-radius 4px
            height 24px
            line-height: 24px
          }

          a.follow {
            // margin-right: 10px
          }

          a.active {
            color: #fff
            border: 1px solid #138FF2
            background: #138FF2
          }
        }
      }

      .infolist {
        clear: both;
        margin: 0;
        background: #fff;
        padding 15px
        display flex
        justify-content space-between

        .listcon {
          text-align: center;

          span {
            display: inline-block;
            width: 100%;
            line-height: 1;
          }

          .title {
            color: #939393;
            font-size 12px
          }

          .number {
            clear: both;
            color: #000;
            font-size 20px
            font-weight: bolder;
          }
        }
      }

      .personInfoDesc {
        clear: both;
        width 80%
        color: #939393;
        font-size 12px
        text-align: center;
        line-height 16px
        position: absolute;
        top 175px
        padding-left: 10%;
        padding-right: 10%;
      }

      .logoutbox {
        clear: both;
        margin-top 10px
        background: #fff;
        padding 0 15px

        a {
          display: inline-block;
          text-align: left;
          color: #000;
          font-weight: normal;
          font-size 14px
          padding-top: 0.26667rem;
          padding-bottom: 0.26667rem;
        }
      }

      .backtoPage {
        width 12px
        height 20px
        top 10px
        left 15px
        position: absolute;

        a {
          display: block;
          width: 100%;
          height: 100%;

          img {
            width 12px
            height 20px
            vertical-align: middle;
          }
        }
      }

      // .editorInfo {
      //   clear: both;
      //   width: 100%;
      //   text-align: center;

      //   a {
      //     display: inline-block;
      //     text-align: center;
      //     color: #000;
      //     font-weight: normal;
      //     font-size 14px
      //     padding: 0;
      //     border-radius: 4px;
      //   }

      //   a.attent {
      //     background: #138FF2;
      //     margin-right 5px
      //     color: #fff;
      //     border: 1px solid #138FF2;
      //   }
      // }

      .version-list {
        clear: both;
        margin-top 10px
        background: #fff;
        padding 0 15px

        a {
          width: 100%;
          border-bottom: 1px solid #e6e6e6;
          padding 0 10px
          margin: 0;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          position: relative;

          span {
            padding: 0;

            &:first-child {
              width: 70%;
              font-size 14px
              color: #000;
            }

            &:last-child {
              color: #939393;
              font-size 12px
            }

            b {
              width 6px
              height 6px
              margin-right 5px
              border-radius: 50%;
              background: #E14123;
              display: inline-block;
              vertical-align: middle;
            }
          }

          span.col-md-4 {
            width: 30%;
            color: #939393;
            text-align: right;
            padding-right 15px
          }

          em {
            position: absolute;
            right: 0;
            display: inline-block;
            width 16px
            height 16px
            padding-left 15px
            padding-right: 0;
            background: url(../../assets/img/right-icon.png) no-repeat right center;
            background-size: contain;
          }
        }

        a:last-child {
          border-bottom: none;
        }
      }
    }

    .customList {
      clear: both;
      margin-top 10px
    }
  }
}
